<template>
  <div class="form-comp">
    <div class="form-icon">
      <div class="form-input">
        <el-input
            v-model="compValue"
            :readonly="true"
            placeholder="请选择图标"
            @click="showIconBox=!showIconBox"
        >
          <template #prefix>
            <i :class="compValue"></i>
          </template>
        </el-input>
      </div>
      <div
          style="width:100%;height:auto;position: absolute;z-index:8888;background: #fff ;border:1px #E4E7ED  solid;margin-top:5px"
          v-if="showIconBox">
        <span v-for="(item) in iconArray" style="margin:5px;float:left" @click="selectIcon(item)">
          <i :class="item"></i>
        </span>
      </div>

    </div>

  </div>
</template>

<script lang="ts" setup>
//定义组件名称
// @ts-ignore
import {getCurrentInstance, onMounted, ref, watch} from "vue";

defineOptions({
  name: "FormIconSelect"
});
const props = defineProps({
  label: {type: String, required: false},
  value: {type: String, required: true},
  disabled: {type: Boolean, required: false}
});
//组件值
let compValue = ref("el-icon-v-user");

//是否显示选择图标
let showIconBox = ref(false);

// @ts-ignore
let {proxy} = getCurrentInstance()

let iconArray = ref<any>([]);

const emit = defineEmits(['update:value'])
watch(() => props.value, () => {
  compValue.value = props.value;

})
onMounted(() => {
  iconArray.value.push('el-icon-v-tuichudenglu');
  iconArray.value.push('el-icon-v-reset-passwd');
  iconArray.value.push('el-icon-v-grant');
  iconArray.value.push('el-icon-v-caidan');
  iconArray.value.push('el-icon-v-org');
  iconArray.value.push('el-icon-v-role-grant');
  iconArray.value.push('el-icon-v-password');
  iconArray.value.push('el-icon-v-circle-user');
  iconArray.value.push('el-icon-v-dict');
  iconArray.value.push('el-icon-v-user-info');
  iconArray.value.push('el-icon-v-role');
  iconArray.value.push('el-icon-v-user');
  iconArray.value.push('el-icon-v-menu');
  iconArray.value.push('el-icon-v-text-app');
  iconArray.value.push('el-icon-v-client_app');
  iconArray.value.push('el-icon-v-rizhi_opt');
  iconArray.value.push('el-icon-v-zhihangrizhi');
  iconArray.value.push('el-icon-v-tongji1');
  iconArray.value.push('el-icon-v-tongjifenxi');
  iconArray.value.push('el-icon-v-dianshi1');
  iconArray.value.push('el-icon-v-yunweidaping');
  iconArray.value.push('el-icon-v-chakandaping');
  iconArray.value.push('el-icon-v-nine_Screen');
  iconArray.value.push('el-icon-v-24gl-chartBarUpward');
  iconArray.value.push('el-icon-v-ditu');
  iconArray.value.push('el-icon-v-shebei1');
  iconArray.value.push('el-icon-v-wendang');
  iconArray.value.push('el-icon-v-shebei');
  iconArray.value.push('el-icon-v-jingwu_car');
  iconArray.value.push('el-icon-v-jingcha');
  iconArray.value.push('el-icon-v-shuiligongchengxinxitongji');
  iconArray.value.push('el-icon-v-shuiku');
  iconArray.value.push('el-icon-v-yunweipeizhiguanli');
  iconArray.value.push('el-icon-v-odbc-full');
  iconArray.value.push('el-icon-v-shujukanban');
  iconArray.value.push('el-icon-v-shuiqingxinxi');
  iconArray.value.push('el-icon-v-yuqingxinxi');
  iconArray.value.push('el-icon-v-IOTtubiao_huabanfuben');
  iconArray.value.push('el-icon-v-gongchengshi');
  iconArray.value.push('el-icon-v-gongchengshi1');
  iconArray.value.push('el-icon-v-shigongdanwei');
  iconArray.value.push('el-icon-v-zhihuiyunwei');
  iconArray.value.push('el-icon-v-yuangong');
  iconArray.value.push('el-icon-v-gongzuojihua');
  iconArray.value.push('el-icon-v-gongzuojihua1');
  iconArray.value.push('el-icon-v-yunwei');
  iconArray.value.push('el-icon-v-xunjianjilu');
  iconArray.value.push('el-icon-v-yunweiguanli');
  iconArray.value.push('el-icon-v-xinxi');
  iconArray.value.push('el-icon-v-word');
  iconArray.value.push('el-icon-v-xiangqing');
  iconArray.value.push('el-icon-v-diqiu');


  if (props.value) {
    compValue.value = props.value;
  }
})

function selectIcon(icon: string) {
  compValue.value = icon;
  showIconBox.value = false;
  emit("update:value", compValue.value)

}
</script>

<style scoped>

</style>